<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    .loading {
      position: relative;
      width: 30px;
      height: 30px;
      border: 2px solid #000;
      border-top-color: rgba(0, 0, 0, 0.2);
      border-right-color: rgba(0, 0, 0, 0.2);
      border-bottom-color: rgba(0, 0, 0, 0.2);
      border-radius: 100%;

      animation: circle infinite 0.75s linear;
    }

    @keyframes circle {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <script src="./tailwind.js"></script>
  <script src="./jQuery.js"></script>
</head>

<body class="w-[350px] flex flex-col items-center relative">
  <!-- loading -->
  <div class="w-full h-full absolute hidden" id="loading">
    <div class="flex flex-col w-full h-full items-center justify-center bg-[rgba(0,0,0,0.3)] ">
      <div class="loading"></div>
      <div id="progress"></div>
    </div>
  </div>
  <!-- loading -->

  <div class="flex w-[80%] flex-col justify-center">
    <div class="text-center">
      <h2 class="mt-5 text-center text-xl font-bold leading-9 tracking-tight text-gray-900">
        mercari数据提取
      </h2>
    </div>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">授权码</label>
        <div class="mt-2">
          <input id="authCode" name="code"
            class="indent-3 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
        </div>
      </div>
    </form>
    <div class="my-5">
      <button id="getData"
        class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        获取数据
      </button>
    </div>
    <!-- modal -->
    <div class="relative z-10 hidden" id="modal">
      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
          <div
            class="relative transform min-w-[200px] overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
            <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
              <div class="sm:flex sm:items-start">
                <div
                  class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                  <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                  </svg>
                </div>
                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                  <h3 class="text-base font-semibold leading-6 text-gray-900" id="alertMsg">
                    <!-- Deactivate account -->
                  </h3>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
              <button id="closeMadal"
                class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./popup.js"></script>
</body>

</html>